<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cart</title>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="./css/cart.css">
    <link rel="stylesheet" href="./css/nav mbx.css">
  <link rel="stylesheet" href="./css/Details page.css">
</head>
<body>
    <div>

        <!-- <div class="nav" style="z-index: 99;">
            <ul>
                <li><a href="index.html"><img src="https://www.innisfree.cn/webstatic/images/logo_2ebdcae.png" alt="" style="height: 31px; width: 164px;"></a></li>
                <li>
                    <div class="ins-headerUserInfo ins-flex is-align-middle ">
                    <span style="margin-right:10px;">Hey,</span>
                    <span style="margin-right:10px;">登录</span>
                    <span style="color: #898587;">注册</span>
                    </div>
                </li>
                <li>
                    <div class="ins-headerSearch ins-appHeader__search">
                        <input type="text" name="" class="ipt" placeholder="第四代小绿瓶">
                        <div class="ins-searchBar ins-headerSearch__dialog"></div>
                    </div>
                </li>
                <li><a href="javascript:;"><p>购物</p></a></li>
                <li><a href="javascript:;"><p>热门活动</p></a></li>
                <li><a href="javascript:;"><p>发现</p></a></li>
                <li><a href="javascript:;"><p>关于我们</p></a></li>
            </ul>
        </div> -->

    <div class="cartContent" style="height: 1000px;">

    <div class="cartlist2">
        
    <h2 style="margin-left: 150px; color: #024137;"><p onclick="javascript:history.go(-1);" style="cursor: pointer;">←</p>购物车列表</h2>
    
    <table>
        <tr>
            <td>商品</td>
            <td>价格</td>
            <td>数量</td>
            <td>删除</td>
        </tr>
    </table>
    <ul>
        <!-- <li>
            <h2></h2>
            <img src="" alt="">
            <p></p>
            <input type="number" name="" id="" value="">
            <button>删除</button>
        </li> -->
    </ul>
    <div class="pay" >
        总价:<span class="count-price"></span>
        数量:<span class="count"></span>
        全选:<input type="checkbox" class="all-sel" name="" id="" onchange="allSelChange(this)">
        
    </div>
    
</div>
</div>


</div>
    <script>
        loadCartList();
        // 加载购物车列表
      /* 
      接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
    接口请求方式：get
    接口参数：
         id  用户id
      */
     async function loadCartList(){
         let cartListAPI="http://jx.xuzhixiang.top/ap/api/cart-list.php";
         let id=localStorage.getItem("id");
         let res=await axios.get(cartListAPI,{params:{id:id}});
         console.log(res.data);
         let cartArr=res.data.data;

         let resArr=cartArr.map((v)=>`
         <div class="clr">

         <li class="cartlistright">
            <img src="${v.pimg}" alt="">
            <h2>${v.pname}</h2>
            <input class="single-select" type="checkbox" onchange="singleSelect(${v.pid},this)">
            <p class="price">${v.pprice}</p>
            <input class="pnum" min=1 onchange="numChange(${v.pid},this)" type="number" name="" id="" value="${v.pnum}">
            <button onclick="delCart(${v.pid})">X</button>
        </li>
        </div>
         `);
         console.log(resArr);
         let ul=document.querySelector("ul");
         ul.innerHTML=resArr.join("");

     }
     // 删除功能
      /* 
      删除用户购物车中的商品 接口

    接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
    接口请求方式：get
    接口参数：
         uid  用户id
         pid  商品id
      */
     async function delCart(pid,btn){
         console.log(pid);
         let uid=localStorage.getItem("id");
         let delCartAPI="http://jx.xuzhixiang.top/ap/api/cart-delete.php";
         let res=await axios.get(delCartAPI,{params:{uid,pid}});
         console.log(res.data);
         loadCartList();
         console.log(this);
         
     }
     function test(btn,evt){
         console.log(btn);
         console.log(evt);
     }

     // 数量改变事件
      /*
        更新购物车中商品数量 接口

      接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
      接口请求方式：get
      接口参数：
           uid  用户id
           pid  商品id
           pnum  要添加的商品数量

        */

        async function numChange(pid,ipt){
            console.log(ipt.value,pid);
            
            let updateCartNumAPI="http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
            let pnum=ipt.value;
            let uid=localStorage.getItem("id");
            let params={pnum,pid,uid}
            console.log(params);
            let res=await axios.get(updateCartNumAPI,{params});
            console.log(res.data);
        }

        // 单选事件
        function singleSelect(pid,ipt){
            console.log(ipt.checked);

            calCountPrice();

            let singleSelectArr=document.querySelectorAll(".single-select");
            // 判断 singleSelectArr 是否所有按钮都为true
            // 如果都为true 让全选变成 true 反之 为false
            // singleSelectArr ---伪数组  不能使用数组的方法
            let arr=[...singleSelectArr];
            let isAllChecked=arr.every(function (v){
                return v.checked===true;
            })
            console.log(isAllChecked);
            document.querySelector(".all-sel").checked=isAllChecked;
        }

        // 全选按钮事件
        function allSelChange(ipt){
            console.log(ipt.checked);
            // 让单选的状态和全选一样
            let singleSelectArr=document.querySelectorAll(".single-select");
            singleSelectArr.forEach((v)=>{v.checked=ipt.checked});
            calCountPrice();
        }

        function calCountPrice(){
            let singleSelectArr=document.querySelectorAll(".single-select");
            console.log(singleSelectArr);
            let count=0;
            let countPrice=0;
            singleSelectArr.forEach((ipt)=>{
                if(ipt.checked==true){
                    console.log(ipt);
                    // 找到选中元素的父元素 根据父元素再找子元素
                    let currentLi = ipt.parentNode;
                    let price=currentLi.querySelector(".price").innerHTML;
                    let pnum=currentLi.querySelector(".pnum").value;
                    let currentCount=price*pnum;
                    console.log(currentCount);
                    count=count+Number(pnum);
                    countPrice+=currentCount;
                }
            })
            console.log(count,countPrice);
            document.querySelector(".count").innerHTML = count;
            document.querySelector(".count-price").innerHTML=countPrice;
        }
    </script>
    
</body>
</html>